/** Global **/
html, body {
	height: 100%;
}

body {
	font-family: Verdana, Tahoma, Arial;
	font-size: 11px;
	line-height: 20px;
	color: #444;
}

table td {
	margin: 0px;
	padding: 0px;
	vertical-align: baseline;
}

ul {
	margin: 0px;
	padding: 0px;
}

abbr {
	cursor: help;
}

img {
	display: block;
}

a {
	color: #9c0000;
	text-decoration: none;
}

a:hover {
	color: #ff0000;
	text-decoration: underline;
}

a.extern {
	padding-right: 13px;
}

/** Global classes **/
.red { color: red; }
.orange { color: orange; }
.green { color: #80d000; }
.grey { color: #aaa; }

.left { float: left; }
.right { float: right; }
.clear { clear: both; }

.hidden { display: none; }
.bull { padding: 0px 5px 0px 3px; }
.flare { margin: -10px -10px -10px -60px; padding: 10px 10px 10px 60px; }

/** Dump **/
pre.dump {
	clear: both;
	background: #F5F5F5;
	border: 1px solid brown;
	padding: 10px;
	position: relative;
	z-index: 9999;
	font-size: 13px;
	text-align: left;
}

pre.dump > span {
	color: brown;
	font-family: Verdana;
	font-size: 16px;
	display: block;
	padding-bottom: 2px;
	margin-bottom: 10px;
	border-bottom: 1px solid brown;
}

/** BBCode **/
dfn {
	font-style: normal;
	text-decoration: underline;
}

div.bbcode {
	color: #ccc;
}

div.quotebox {
	margin: 10px 0px;
	padding: 0 10px;
	background: rgba(0, 0, 0, 0.02);
	border-style: solid;
	border-width: 1px 1px 1px 3px;
	border-color: rgba(0, 0, 0, 0.07);
	color: #8A8A8A;
}

	div.quotebox blockquote,
	div.quotebox cite {
		border: 0;
		font-style: normal;
		font-weight: normal;
		margin: 0;
		padding: 0;
	}

	div.quotebox cite {
		display: block;
		padding: 10px 0 0 0;
		font-weight: bold;
		line-height: 11px;
		color: #8A8A8A;
	}

	div.quotebox  blockquote {
		overflow: hidden;
		width: 100%;
	}

/** Online colors **/
.offline { color: transparent; }
.online { color: #7fba00; }
.away { color: #fcd116; }
.busy { color: #e81123; }

/** Wow game colors **/
.Druid { color: #ff8d29; }
._Druid { color: #ff7d0a; }
.Death_Knight, ._Death_Knight { color: #c41f3b; }
.Hunter { color: #7cbf1d; }
._Hunter { color: #abd473; }
.Mage { color: #1e9ac7; }
._Mage { color: #69ccf0; }
.Monk { color: #23d48b; }
._Monk { color: #00FF96; }
.Paladin { color: #d96c9b; }
._Paladin { color: #f58cba; }
.Priest { color: #d9d9d9; }
._Priest { color: #ffffff; }
.Rogue { color: #bfb71d; }
._Rogue { color: #fff569; }
.Shaman, ._Shaman { color: #2459FF; }
.Warlock { color: #8673bf; }
._Warlock { color: #9482ca; }
.Warrior { color: #aa6a25; }
._Warrior { color: #c79c6e; }

.Alliance { color: #145eda; }
.Horde { color: #da1414; }

.TANK { color: blue; }
.HEALING { color: green; }
.DPS { color: red; }

/** Site **/
div.overlay {
	position: fixed;
	bottom: 0px;
	left: 0px;
	right: 0px;
	top: 0px;
	background: rgba(255, 255, 255, 0.5);
	z-index: 99999;
	cursor: wait;
}

div.site {
	width: 790px;
	margin: 0 auto;
	background: transparent url('../img/logo.png') top left no-repeat;
	min-height: 240px;
	position: relative;
}

	div.site > div.sticky {
		position: fixed;
		right: 50%;
		margin-right: -395px;
		width: 790px;
	}

	div.site > div.tycontainer > div.noty,
	div.site > div.sticky > div.noty {
		width: 160px;
		position: absolute;
		left: 10px;
		padding-top: 5px;
		overflow: hidden;
	}

	div.site > div.tycontainer > div.noty {
		top: 257px;
		bottom: 0px;
	}

	div.site > div.sticky > div.noty {
		top: 0px;
	}

	div.site > div.inside {
		width: 610px;
		float: right;
	}

		div.site > div.inside > h1 {
			margin: 45px 0px 19px 0px;
			font-family: 'Yanone Kaffeesatz', Tahoma, Arial;
			font-weight: bold;
			font-size: 39px;
			line-height: 39px;
			text-shadow: 1px 1px 0px white;
		}

		div.site > div.inside > h1 > a {
			color: #444;
			text-decoration: none;
		}

/** Who's online **/
div.site > div.inside > div.top {
	position: absolute;
	top: 104px;
	right: 0px;
	height: 20px;
	width: 300px;
	overflow: hidden;
}

	div.top > div.avatar {
		float: right;
		margin-left: 5px;
		width: 20px;
		height: 20px;
		position: relative;
	}

		div.top > div.avatar > a {
			display: block;
		}

			div.top > div.avatar > a > div.status {
				position: absolute;
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				border-radius: 3px;
				transition: box-shadow .3s;
				box-shadow: 2px 0 inset;
			}

			div.top > div.avatar > a > img {
				border-radius: 3px;
			}

/** Menu **/
div.site > div.inside > ul.menu {
	margin: 0px;
	padding: 0px;
	list-style: none;
	display: block;
	height: 28px;
	border-bottom: 1px solid #ccc;
}

	div.site > div.inside > ul.menu > li {
		position: relative;
		display: block;
		float: left;
		margin-right: 20px;
		padding: 2px 0px;
	}

	div.site > div.inside > ul.menu > li > a {
		font-family: 'BebasNeueRegular', Tahoma, Arial;
		font-size: 23px;
		text-shadow: 1px 1px 0px white;
		text-decoration: none;
	}

	div.site > div.inside > ul.menu > li.active {
		top: 2px;
		padding-top: 0px;
		border-bottom: 2px solid #FF9B00;
	}

	div.site > div.inside > ul.menu > li.active > a {
		color: #FF9B00;
	}

div.site > div.inside > div.shadow {
	background: #fff;
	height: 1px;
}

/** Metro **/
div.site > div.inside > div.metro {
	display: block;
	height: 109px;
	margin-top: 10px;
	margin-bottom: 10px;
}

	div.site > div.inside > div.metro > div {
		float: left;
		height: 50px;
		width: 200px;
		background: #bbb;
		margin-left: 7px;
		margin-bottom: 7px;
		position: relative;
		display: block;
		border-bottom: 1px solid #fff;
		z-index: 1;
	}

	div.site > div.inside > div.metro > div.m0 {
		width: 196px;
		height: 108px;
		margin-left: 0px;
		background: #000 top left no-repeat;
	}

	div.site > div.inside > div.metro > div.m1 {
		background: #0099FF;
	}

	div.site > div.inside > div.metro > div.m2 {
		background: #669900;
	}

	div.site > div.inside > div.metro > div.m3 {
		background: #990033;
	}

	div.site > div.inside > div.metro > div.m4 {
		background: #333366;
	}

	div.site > div.inside > div.metro > div > h2 {
		position: absolute;
		display: block;
		margin: 0px;
		top: 5px;
		left: 5px;
		color: #fff;
		text-shadow: 1px 1px 0px #000;
		font-family: Tahoma, Verdana, Arial;
		font-size: 13px;
		z-index: 3;
	}

	div.site > div.inside > div.metro > div > span.desc,
	div.site > div.inside > div.metro > div > a.desc {
		position: absolute;
		bottom: 0px;
		left: 0px;
		right: 0px;
		color: #ff9b00;
		font-size: 10px;
		line-height: 10px;
		display: block;
		padding: 5px;
		background: rgba(0, 0, 0, 0.5);
		font-family: Verdana, Tahoma, Arial;
		z-index: 5;
	}

	div.site > div.inside > div.metro > div > span.desc {
		z-index: 3;
	}

	div.site > div.inside > div.metro > div > div.over,
	div.site > div.inside > div.metro > div > a.over {
		position: absolute;
		display: block;
		bottom: 0px;
		left: 0px;
		right: 0px;
		top: 0px;
		z-index: 4;
	}

	div.site > div.inside > div.metro > div > div.over {
		background: rgba(150, 150, 150, 0.4);
		z-index: 2;
	}

	div.site > div.inside > div.metro > div > a.console {
		position: absolute;
		display: block;
		right: 0px;
		top: 0px;
		width: 30px;
		height: 30px;
		z-index: 5;
	}

	div.site > div.inside > div.metro > div > a.console:hover {
		background-color: rgba(0, 0, 0, 0.25);
	}

/** Page Globals **/
div.site > div.inside > div.page {
	border: 1px solid #ddd;
	background: white;
	padding: 10px;
	margin-top: 10px;
	position: relative;
	z-index: 1;
}

	div.page h3 {
		font-family: Tahoma, Verdana, Arial;
		font-size: 13px;
		line-height: 13px;
		margin: 0px 0px 10px 0px;
		padding-bottom: 8px;
		border-bottom: 1px solid #FF9B00;
		display: block;
		width: 588px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	div.page > span.advice {
		display: block;
		margin: -10px 0px 10px 0px;
		padding: 5px 10px;
		background: #f3f3f3;
		border: 1px solid #ddd;
		border-top: none;
		border-radius: 0px 0px 5px 5px;
	}

	div.page h4 {
		font-family: Tahoma, Verdana, Arial;
		font-size: 12px;
		line-height: 20px;
		margin: 0px;
	}

	div.page .delimiter,
	div.page .separator {
		height: 1px;
		padding: 10px 0px;
	}

/** Footer **/
div.site > div.inside > div.footer {
	text-align: center;
	font-size: 11px;
	line-height: 11px;
	font-family: Verdana, Tahoma, Arial;
	margin: 10px 0px;
	color: #bbb;
}